<template>
  <div class="dashboard">
    <!-- 修改房间网格容器的样式 -->
    <div class="room-grid-container">
      <div class="room-grid">
        <el-card 
          v-for="room in rooms" 
          :key="room.id"
          :class="['room-card', room.status]"
        >
          <template #header>
            <div class="room-header">
              <span>{{ room.name }}</span>
              <el-tag :type="getStatusType(room.status)">
                {{ room.status }}
              </el-tag>
            </div>
          </template>
          
          <div class="room-info">
            <!-- 使用中状态显示 -->
            <template v-if="room.status === '使用中' && room.currentOrder">
              <div class="usage-info">
                <div class="time-info">
                  <p class="start-time">
                    <span class="info-label">
                      <el-icon><Clock /></el-icon>
                      开始时间
                    </span>
                    <span>{{ formatTime(room.currentOrder.start_time) }}</span>
                  </p>
                  <p class="duration">
                    <span class="info-label">
                      <el-icon><Timer /></el-icon>
                      已用时长
                    </span>
                    <span>{{ formatDuration(room.currentOrder.duration) }}</span>
                  </p>
                  <p class="overtime" v-if="room.currentOrder.overtime > 0">
                    <span class="info-label">
                      <el-icon><Warning /></el-icon>
                      超时时长
                    </span>
                    <span>{{ formatDuration(room.currentOrder.overtime) }}</span>
                  </p>
                </div>
                <div class="fee-info">
                  <p class="base-fee">
                    <span class="info-label">
                      <el-icon><House /></el-icon>
                      房间费用
                    </span>
                    <span>¥{{ room.currentOrder.current_base_amount }}</span>
                  </p>
                  <p class="snack-fee">
                    <span class="info-label">
                      <el-icon><Goods /></el-icon>
                      商品费用
                    </span>
                    <span>¥{{ room.currentOrder.snack_amount }}</span>
                  </p>
                  <p class="total-fee">
                    <span class="info-label">
                      <el-icon><Money /></el-icon>
                      总计金额
                    </span>
                    <span>¥{{ room.currentOrder.current_total_amount }}</span>
                  </p>
                </div>
              </div>
            </template>
            <template v-else>
              <div class="empty-info">
                <p>
                  <el-icon><Coin /></el-icon>
                  最低消费：¥{{ room.minimum_charge }}
                </p>
                <p>
                  <el-icon><Timer /></el-icon>
                  {{ room.minimum_hours }}小时起计
                </p>
                <p>
                  <el-icon><Money /></el-icon>
                  超时费率：¥{{ room.overtime_rate }}/时
                </p>
              </div>
            </template>
          </div>
          
          <div class="room-actions">
            <template v-if="room.status === '空闲'">
              <el-button type="primary" @click="handleStartOrder(room)">
                开台
              </el-button>
            </template>
            <template v-if="room.status === '使用中'">
              <el-button type="success" @click="showAddProductDialog(room)">
                商品
              </el-button>
              <el-button type="warning" @click="handleCheckout(room)">
                结算
              </el-button>
            </template>
          </div>
        </el-card>
      </div>
    </div>

    <!-- 添加商品对话框 -->
    <el-dialog
      title="添加商品"
      v-model="productDialogVisible"
      width="860px"
      class="product-dialog"
    >
      <div class="product-content">
        <!-- 左侧：商品列表 -->
        <div class="product-list">
          <div class="product-header">
            <h3>可选商品</h3>
            <div class="filter-bar">
              <el-input
                v-model="searchQuery"
                placeholder="搜索商品"
                prefix-icon="Search"
                clearable
                class="search-input"
              />
              <el-select
                v-model="categoryFilter"
                placeholder="分类筛选"
                clearable
                class="category-filter"
              >
                <el-option
                  v-for="category in categoryList"
                  :key="category.id"
                  :label="category.name"
                  :value="category.id"
                />
              </el-select>
            </div>
          </div>
          <el-table 
            :data="filteredProducts" 
            style="width: 100%"
            :header-cell-style="{ background: '#f5f7fa' }"
            size="large"
            height="600"
          >
            <el-table-column prop="name" label="名称" min-width="180">
              <template #default="scope">
                <div class="product-name">
                  <span>{{ scope.row.name }}</span>
                  <el-tag 
                    size="small" 
                    :type="scope.row.stock < 10 ? 'danger' : 'success'"
                  >
                    {{ scope.row.stock }}
                  </el-tag>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="price" label="单价" width="80" align="center">
              <template #default="scope">
                <span class="price">¥{{ scope.row.price }}</span>
              </template>
            </el-table-column>
            <el-table-column label="快捷添加" width="200" align="center">
              <template #default="scope">
                <div class="quick-add-buttons">
                  <el-button-group size="small">
                    <el-button 
                      type="primary" 
                      :icon="Plus"
                      :disabled="scope.row.stock < 1"
                      @click="quickAddProduct(scope.row, 1)"
                    >
                      1{{ scope.row.unit }}
                    </el-button>
                    <el-button 
                      type="primary" 
                      :icon="Plus"
                      :disabled="scope.row.stock < 2"
                      @click="quickAddProduct(scope.row, 2)"
                    >
                      2{{ scope.row.unit }}
                    </el-button>
                    <el-button 
                      type="primary"
                      :icon="Plus"
                      :disabled="scope.row.stock < 5"
                      @click="quickAddProduct(scope.row, 5)"
                    >
                      5{{ scope.row.unit }}
                    </el-button>
                  </el-button-group>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
        
        <!-- 右侧：已添加列表 -->
        <div class="added-list">
          <div class="added-header">
            <h3>已添加商品</h3>
          </div>
          <div class="added-content">
            <div class="added-items" v-if="currentRoom?.currentOrder?.items?.length">
              <div 
                v-for="item in currentRoom.currentOrder.items" 
                :key="item.id" 
                class="added-item"
              >
                <div class="item-info">
                  <span class="item-name">{{ item.snack_name }}</span>
                  <div class="item-details">
                    <span class="item-quantity">x{{ item.quantity }}</span>
                    <span class="item-time">{{ formatTimeAgo(item.created_at) }}</span>
                  </div>
                </div>
                <div class="item-actions">
                  <span class="item-price">¥{{ item.subtotal }}</span>
                  <el-button-group size="small">
                    <el-button 
                      type="primary"
                      circle
                      @click="handlePrintLabel(item)"
                      title="打印标签"
                    >
                      <el-icon><Printer /></el-icon>
                    </el-button>
                    <el-button 
                      type="danger" 
                      circle
                      @click="handleDeleteOrderItem(item)"
                      title="删除商品"
                    >
                      <el-icon><Delete /></el-icon>
                    </el-button>
                  </el-button-group>
                </div>
              </div>
              <div class="added-total">
                <span>合计</span>
                <span class="total-price">¥{{ currentRoom.currentOrder.snack_amount }}</span>
              </div>
            </div>
            <div v-else class="no-items">
              暂无添加商品
            </div>
          </div>
        </div>
      </div>
      
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="closeProductDialog">关闭</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 结算对话框 -->
    <el-dialog
      title="结算确认"
      v-model="checkoutDialogVisible"
      width="500px"
      :close-on-click-modal="false"
    >
      <div v-if="checkoutDetails" class="checkout-details">
        <!-- 原始费用信息 -->
        <div class="original-fees">
          <h4>原始费用</h4>
          <div class="fee-item">
            <span class="label">房间费</span>
            <span class="amount">¥{{ checkoutDetails.base_amount }}</span>
          </div>
          <div class="fee-item">
            <span class="label">超时费</span>
            <span class="amount">¥{{ checkoutDetails.overtime_fee }}</span>
          </div>
          <div class="fee-item">
            <span class="label">商品费</span>
            <span class="amount">¥{{ checkoutDetails.snack_amount }}</span>
          </div>
          <div class="fee-item original-total">

            <span class="label">总计</span>
            <span class="amount">¥{{ checkoutDetails.total_amount }}</span>
          </div>
        </div>
        
        <el-divider>调整金额</el-divider>
        
        <!-- 调整金额 -->
        <div class="adjust-fees">
          <div class="adjustment-section">
            <div class="section-header">
              <span class="section-label">调整金额：</span>
            </div>
            <el-input-number 
              v-model="adjustForm.adjustment"
              :precision="2"
              :step="1"
              placeholder="输入调整金额（负数为优惠）"
              style="width: 180px"
            />
          </div>
          <!-- 常用优惠选项 -->
          <div class="quick-adjustments">
            <el-button 
              v-for="option in quickAdjustments" 
              :key="option.value"
              size="small"
              :class="{ active: adjustForm.adjustment === option.value }"
              @click="applyQuickAdjustment(option)"
            >
              <span class="option-label">{{ option.label }}</span>
              <span class="option-value">{{ option.value }}元</span>
            </el-button>
          </div>
          <!-- 备注部分 -->
          <div class="remark-section">
            <div class="section-header">
              <span class="section-label">备注信息：</span>
            </div>
            <div class="remark-input">
              <el-input 
                v-model="adjustForm.remark"
                type="textarea"
                :rows="2"
                placeholder="请输入备注信息"
              />
              <div class="quick-remarks">
                <el-button 
                  v-for="remark in quickRemarks" 
                  :key="remark"
                  size="small"
                  plain
                  :class="{ active: adjustForm.remark === remark }"
                  @click="applyQuickRemark(remark)"
                >
                  {{ remark }}
                </el-button>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 最终费用 -->
        <div class="final-fees">
          <div class="fee-item total">
            <span class="label">应收总计</span>
            <span class="amount">¥{{ finalAmount }}</span>
          </div>
        </div>
      </div>
      
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="cancelCheckout">取消</el-button>
          <el-button 
            type="success" 
            :disabled="!checkoutDetails"
            @click="printReceipt"
          >
            <el-icon><Printer /></el-icon>
            打印小票
          </el-button>
          <el-button
            type="primary"
            @click="confirmCheckout"
            :loading="checkoutLoading"
          >
            确认结算
          </el-button>
          
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { ref, onMounted, computed, onUnmounted } from 'vue'
import { roomAPI, orderAPI, snackAPI, printAPI } from '../api/services'
import { ElMessage, ElMessageBox } from 'element-plus'
import { 
  Search, Delete, Plus, Timer, Money, 
  Goods, ArrowRight, Clock, Warning,
  House, Coin, ShoppingCart, Printer
} from '@element-plus/icons-vue'

export default {
  name: 'Dashboard',
  components: {
    Search,
    Delete,
    Plus,
    Timer,
    Money,
    Goods,
    ArrowRight,
    Clock,
    Warning,
    House,
    Coin,
    ShoppingCart,
    Printer
  },
  setup() {
    const rooms = ref([])
    const snacks = ref([])
    const currentRoom = ref(null)
    const currentOrder = ref({
      id: null,
      items: [],
      snack_amount: 0
    })
    const productDialogVisible = ref(false)
    const checkoutDialogVisible = ref(false)
    const checkoutDetails = ref(null)
    const checkoutLoading = ref(false)
    const checkoutRoom = ref(null)
    const searchQuery = ref('')
    const adjustForm = ref({
      adjustment: 0,
      remark: ''
    })
    const categoryFilter = ref('')
    const categoryList = ref([])
    
    // 计算可用的商品列表
    const availableProducts = computed(() => {
      return snacks.value
        .filter(s => s.is_active)
        .map(s => ({
          ...s,
        }))
    })
    
    const getStatusType = (status) => {
      const types = {
        '空闲': 'success',
        '使用中': 'warning',
        '维护中': 'danger'
      }
      return types[status] || 'info'
    }

    const fetchRooms = async () => {
      try {
        const response = await roomAPI.getRoomStatus()
        rooms.value = response
      } catch (error) {
        console.error('Failed to fetch rooms:', error)
        ElMessage.error('获取包房状态失败')
      }
    }

    const fetchSnacks = async () => {
      try {
        const response = await snackAPI.getSnacks()
        snacks.value = response.filter(s => s.is_active && s.stock > 0)
      } catch (error) {
        ElMessage.error('获取商品信息失败')
      }
    }

    const handleStartOrder = async (room) => {
      try {
        const response = await orderAPI.createOrder({ room_id: room.id })
        if (response && response.message === "开房成功") {
          ElMessage.success('开房成功')
          await updateRoomStatus()
        } else {
          throw new Error(response?.message || '开房失败')
        }
      } catch (error) {
        console.error('Failed to start order:', error)
        ElMessage.error(error.message || error.response?.data?.detail || '开房失败')
      }
    }

    const showAddProductDialog = async (room) => {
      try {
        if (!room.currentOrder) {
          ElMessage.error('该包房没有进行中的订单')
          return
        }

        // 设置当前房间
        currentRoom.value = room

        // 设置当前订单信息
        currentOrder.value = room.currentOrder  // 直接使用房间状态中的订单信息
        console.log('Current order with items:', currentOrder.value)

        // 获取可用商品列表
        await fetchSnacks()
        
        // 获取分类列表
        await fetchCategories()
        
        // 重置筛选条件
        searchQuery.value = ''
        categoryFilter.value = ''
        
        // 显示对话框
        productDialogVisible.value = true
      } catch (error) {
        console.error('Failed to get order:', error)
        if (error.response?.status === 404) {
          ElMessage.error('该包房没有进行中的订单')
        } else {
          ElMessage.error('获取订单信息失败')
        }
        // 清理状态
        currentRoom.value = null
        currentOrder.value = {
          id: null,
          items: [],
          snack_amount: 0
        }
      }
    }

    // 快速添加商品
    const quickAddProduct = async (product, quantity) => {
      if (!currentOrder.value?.id) {
        ElMessage.error('订单信息无效')
        return
      }

      if (product.stock < quantity) {
        ElMessage.warning('库存不足')
        return
      }

      try {
        // 添加商品
        await orderAPI.addOrderItem(currentOrder.value.id, { 
          snack_id: product.id, 
          quantity 
        })
        
        // 重新获取房间状态，以更新商品列表
        await updateRoomStatus()
        
        // 更新当前订单信息
        const updatedRoom = rooms.value.find(r => r.id === currentRoom.value.id)
        if (updatedRoom && updatedRoom.currentOrder) {
          currentOrder.value = updatedRoom.currentOrder
          currentRoom.value = updatedRoom
        }

        // 更新商品列表（更新库存）
        await fetchSnacks()

        ElMessage.success('添加成功')
      } catch (error) {
        console.error('Failed to add product:', error)
        ElMessage.error(error.response?.data?.detail || '出错了!!!')
      }
    }

    // 关闭商品对话框
    const closeProductDialog = () => {
      productDialogVisible.value = false
      currentOrder.value = {
        id: null,
        items: [],
        snack_amount: 0
      }
      currentRoom.value = null
      searchQuery.value = ''
      categoryFilter.value = ''
      updateRoomStatus()
    }

    const handleCheckout = async (room) => {
      checkoutRoom.value = room
      try {
        const response = await orderAPI.preCheckout(room.currentOrder.id)
        if (response && response.order) {
          checkoutDetails.value = response.order
        } else {
          throw new Error('获取结算信息失败')
        }
        adjustForm.value = { adjustment: 0, remark: '' }  // 重置调整表单
        checkoutDialogVisible.value = true
      } catch (error) {
        console.error('Failed to get checkout details:', error)
        ElMessage.error('获取结算信息失败')
      }
    }

    const cancelCheckout = () => {
      checkoutDialogVisible.value = false
      checkoutDetails.value = null
      checkoutRoom.value = null
    }

    const confirmCheckout = async () => {
      try {
        checkoutLoading.value = true
        await orderAPI.checkout(checkoutDetails.value.id, adjustForm.value)
        ElMessage.success('结算成功')
        checkoutDialogVisible.value = false
        fetchRooms()
      } catch (error) {
        ElMessage.error('结算失败')
      } finally {
        checkoutLoading.value = false
      }
    }

    // 格式化时长
    const formatDuration = (hours) => {
      if (!hours || isNaN(hours)) return '0分钟'
      const totalMinutes = Math.floor(hours * 60)
      const h = Math.floor(totalMinutes / 60)
      const m = totalMinutes % 60
      return h > 0 ? `${h}小时${m}分钟` : `${m}分钟`
    }

    // 格式化时间
    const formatTime = (time) => {
      if (!time) return ''
      return new Date(time).toLocaleString('zh-CN', {
        hour12: false,
        year: 'numeric',
        month: '2-digit',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit'
      })
    }

    // 格式化相对时间
    const formatTimeAgo = (time) => {
      if (!time) return ''
      const now = new Date()
      const past = new Date(time)
      const diffInSeconds = Math.floor((now - past) / 1000)
      
      if (diffInSeconds < 60) {
        return '刚刚'
      } else if (diffInSeconds < 3600) {
        const minutes = Math.floor(diffInSeconds / 60)
        return `${minutes}分钟前`
      } else if (diffInSeconds < 86400) {
        const hours = Math.floor(diffInSeconds / 3600)
        return `${hours}小时前`
      } else {
        const days = Math.floor(diffInSeconds / 86400)
        return `${days}天前`
      }
    }

    // 计算房间的使用时长
    const calculateDuration = (startTime) => {
      if (!startTime) return 0
      const start = new Date(startTime)
      const now = new Date()
      const duration = (now - start) / (1000 * 60 * 60)  // 转换为小时
      return Number(duration.toFixed(2))  // 保留两位小数
    }

    // 更新房间状态的函数
    const updateRoomStatus = async () => {
      try {
        const response = await roomAPI.getRoomStatus()
        console.log('Room status response:', response)
        // 确保每个房间的时长都被正确计算
        response.forEach(room => {
          if (room.currentOrder) {
            const duration = calculateDuration(room.currentOrder.start_time)
            room.currentOrder = {
              ...room.currentOrder,
              duration: duration
            }
          }
        })
        rooms.value = response
      } catch (error) {
        console.error('Failed to update room status:', error)
        ElMessage.error('更新房间状态失败')
      }
    }

    // 设置定时器
    let timer
    onMounted(() => {
      updateRoomStatus()  // 使用 updateRoomStatus 替代 fetchRooms
      // 每30秒更新一次状态
      timer = setInterval(updateRoomStatus, 30000)
    })

    // 组件卸载时清除定时器
    onUnmounted(() => {
      if (timer) {
        clearInterval(timer)
      }
    })

    const filteredProducts = computed(() => {
      let filtered = availableProducts.value
      
      // 按名称搜索
      if (searchQuery.value) {
        const query = searchQuery.value.toLowerCase()
        filtered = filtered.filter(product => 
          product.name.toLowerCase().includes(query)
        )
      }
      
      // 按分类筛选
      if (categoryFilter.value) {
        filtered = filtered.filter(product => 
          product.category_id === categoryFilter.value
        )
      }
      
      return filtered
    })

    // 计算最终金额
    const finalAmount = computed(() => {
      if (!checkoutDetails.value) return 0
      return parseFloat((checkoutDetails.value.total_amount + adjustForm.value.adjustment).toFixed(2))
    })

    // 快捷优惠选项
    const quickAdjustments = [
      { label: '新人优惠', value: -5 },
      { label: '节日优惠', value: -6 },
      { label: '会员优惠', value: -8 }
    ]
    
    // 常用备注选项
    const quickRemarks = [
      '特惠活动',
      '现金支付',
      '微信支付',
      '支付宝支付',
    ]
    
    // 应用快捷优惠
    const applyQuickAdjustment = (option) => {
      adjustForm.value.adjustment = option.value
      if (!adjustForm.value.remark) {
        adjustForm.value.remark = option.label
      }
    }
    
    // 应用快捷备注
    const applyQuickRemark = (remark) => {
      adjustForm.value.remark = remark
    }

    // 获取分类列表
    const fetchCategories = async () => {
      try {
        const response = await snackAPI.getCategories()
        categoryList.value = response || []
      } catch (error) {
        console.error('Failed to fetch categories:', error)
      }
    }

    // 添加删除订单项的方法
    const handleDeleteOrderItem = async (item) => {
      try {
        await ElMessageBox.confirm(
          '确定要删除这个商品吗？',
          '提示',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }
        )

        // 调用删除API
        await orderAPI.deleteOrderItem(currentOrder.value.id, item.id)
        
        // 重新获取房间状态，以更新商品列表
        await updateRoomStatus()
        
        // 更新当前订单信息
        const updatedRoom = rooms.value.find(r => r.id === currentRoom.value.id)
        if (updatedRoom && updatedRoom.currentOrder) {
          currentOrder.value = updatedRoom.currentOrder
          currentRoom.value = updatedRoom
        }

        // 更新商品列表（更新库存）
        await fetchSnacks()

        ElMessage.success('删除成功')
      } catch (error) {
        if (error !== 'cancel') {
          console.error('Failed to delete order item:', error)
          ElMessage.error(error.response?.data?.detail || '删除失败')
        }
      }
    }

    // 修改打印小票方法
    const printReceipt = async () => {
      if (!checkoutDetails.value) return
      
      try {
        // 准备打印数据
        const printData = {
          order_id: checkoutDetails.value.id,
          room_name: checkoutRoom.value.name,
          start_time: checkoutDetails.value.start_time,
          end_time: checkoutDetails.value.end_time || new Date().toISOString(),
          items: checkoutDetails.value.snack_items || [],
          base_amount: Number(checkoutDetails.value.base_amount),
          snack_amount: Number(checkoutDetails.value.snack_amount),
          total_amount: Number(checkoutDetails.value.total_amount),
          adjustment: Number(adjustForm.value.adjustment || 0),
          remark: adjustForm.value.remark || ''
        }

        console.log('Sending print data:', printData) // 添加日志

        const response = await printAPI.printReceipt(printData)
        if (response.message === "打印成功") {
          ElMessage.success('小票打印成功')
        } else {
          ElMessage.warning('小票打印失败')
        }
      } catch (error) {
        console.error('Print error:', error)
        ElMessage.error(`打印失败: ${error.response?.data?.detail || '未知错误'}`)
      }
    }

    // 在 script 部分添加 handlePrintLabel 方法
    const handlePrintLabel = async (item) => {
      try {
        const labelData = {
          name: item.snack_name,
          price: Number(item.price)
        }
        
        const response = await printAPI.printLabel(labelData)
        if (response.message === "打印成功") {
          ElMessage.success('标签打印成功')
        } else {
          ElMessage.warning('标签打印失败')
        }
      } catch (error) {
        console.error('Label print error:', error)
        ElMessage.error('标签打印失败')
      }
    }

    return {
      rooms,
      currentRoom,
      room: currentRoom,
      productDialogVisible,
      checkoutDialogVisible,
      checkoutDetails,
      checkoutLoading,
      checkoutRoom,
      availableProducts,
      getStatusType,
      handleStartOrder,
      showAddProductDialog,
      quickAddProduct,
      closeProductDialog,
      handleCheckout,
      cancelCheckout,
      confirmCheckout,
      formatTime,
      formatDuration,
      formatTimeAgo,
      searchQuery,
      filteredProducts,
      updateRoomStatus,
      adjustForm,
      finalAmount,
      quickAdjustments,
      quickRemarks,
      applyQuickAdjustment,
      applyQuickRemark,
      categoryFilter,
      categoryList,
      handleDeleteOrderItem,
      printReceipt,
      handlePrintLabel
    }
  }
}
</script>

<style scoped>
.dashboard {
  position: absolute;  /* 使用绝对定位填充整个容器 */
  top: 80px;
  bottom: 0;
  left: 200px;
  right: 0;
  padding: 15px;
  display: flex;
  flex-direction: column;

  overflow: hidden;  /* 防止双滚动条 */
}

.dashboard h2 {
  margin: 0 0 15px 0;
  font-size: 18px;
  color: #303133;
  flex-shrink: 0;  /* 防止标题被压缩 */
}

/* 修改滚动容器样式 */
.room-grid-container {
  flex: 1;
  overflow-y: auto;
  min-height: 0;  /* 重要：确保flex布局正常工作 */
  padding-right: 8px;  /* 为滚动条预留空间 */
}

.room-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
  padding-bottom: 30px;  /* 增加底部内边距，确保最后一行完全可见 */
}

/* 美化滚动条 */
.room-grid-container::-webkit-scrollbar {
  width: 8px;
}

.room-grid-container::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
}

.room-grid-container::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 4px;
}

.room-grid-container::-webkit-scrollbar-thumb:hover {
  background: #555;
}

.room-card {
  transition: all 0.3s;
  border: none;
  height: 100%;
  min-height: 260px;
  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
  box-shadow: 0 2px 12px rgba(0,0,0,.1);
}

.room-card :deep(.el-card__header) {
  padding: 12px 15px;
  border: none;
  height: 50px;
  box-sizing: border-box;
  background: linear-gradient(135deg, #f0f2f5 0%, #e6e8eb 100%);
}

.room-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.room-header span {
  font-size: 16px;
  font-weight: 500;
  color: #303133;
  text-shadow: 1px 1px 1px rgba(255,255,255,.8);
}

/* 使用中状态 */
.room-card.使用中 {
  background: linear-gradient(135deg, #fff7e6 0%, #fff1d6 100%);
}

.room-card.使用中 :deep(.el-card__header) {
  background: linear-gradient(135deg, #ffd591 0%, #ffc069 100%);
}

/* 维护中状态 */
.room-card.维护中 {
  background: linear-gradient(135deg, #fff0f0 0%, #ffeded 100%);
}

.room-card.维护中 :deep(.el-card__header) {
  background: linear-gradient(135deg, #ffa39e 0%, #ff7875 100%);
}

/* 空闲状态 */
.room-card.空闲 {
  background: linear-gradient(135deg, #f6ffed 0%, #f0ffe6 100%);
}

.room-card.空闲 :deep(.el-card__header) {
  background: linear-gradient(135deg, #95de64 0%, #73d13d 100%);
}

.room-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px rgba(0,0,0,.08);
}

.room-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.room-header :deep(.el-tag) {
  border: none;
  font-weight: bold;
}

.room-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 140px;
}

.usage-info {
  padding: 10px;
  background: rgba(255,255,255,.8);
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0,0,0,.05);
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 5px;
}

.time-info {
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px dashed #ebeef5;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.time-info p {
  margin: 2px 0;
  color: #606266;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.info-label {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #909399;
  min-width: 85px;  /* 保持标签对齐 */
}

.info-label .el-icon {
  font-size: 16px;
  margin-right: 2px;
}

.time-info .overtime {
  color: #f56c6c;
}

.time-info .overtime .info-label {
  color: #f56c6c;
}

.fee-info p {
  margin: 2px 0;  /* 减小行间距 */
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.fee-info .info-label .el-icon {
  color: #909399;
}

.total-fee {
  color: #f56c6c;
  font-weight: bold;
  font-size: 16px;
  padding-top: 3px;
  margin-top: 3px;
  border-top: 1px dashed #ebeef5;
}

.empty-info {
  text-align: center;
  color: #909399;
  padding: 15px;
  background: rgba(255,255,255,.8);
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0,0,0,.05);
  flex: 1;  /* 使用 flex: 1 来填充剩余空间 */
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
}

.empty-info p {
  margin: 5px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.empty-info p:first-child {
  font-size: 16px;
  color: #303133;
  font-weight: 500;
}

.empty-info .el-icon {
  font-size: 18px;
  color: #909399;
}

.room-actions {
  margin-top: auto;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 8px 0 0 0;  /* 减小顶部内边距 */
  border-top: 1px dashed #ebeef5;
  min-height: 60px;  /* 减小按钮区域高度 */
  box-sizing: border-box;
}

.room-actions :deep(.el-button) {
  padding: 6px 15px;
  font-weight: 500;
  min-width: 60px;  /* 确保按钮有最小宽度 */
}

.room-actions :deep(.el-button--primary) {
  background: linear-gradient(135deg, #409eff 0%, #85c1ff 100%);
  border: none;
}

.room-actions :deep(.el-button--success) {
  background: linear-gradient(135deg, #67c23a 0%, #95d475 100%);
  border: none;
}

.room-actions :deep(.el-button--warning) {
  background: linear-gradient(135deg, #e6a23c 0%, #f3d19e 100%);
  border: none;
}

.product-dialog {
  :deep(.el-dialog__body) {
    padding: 0;
    height: 500px;
    overflow: hidden;
  }
}

.product-content {
  display: flex;
  height: 100%;
}

.product-list {
  flex: 2;
  border-right: 1px solid #dcdfe6;
  padding: 20px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.product-header {
  margin-bottom: 20px;
}

.product-header h3 {
  margin: 0 0 15px 0;
}

.filter-bar {
  display: flex;
  gap: 10px;
  margin-bottom: 15px;
}

.search-input {
  flex: 2;
}

.category-filter {
  flex: 1;
}

.product-name {
  display: flex;
  align-items: center;
  font-size: 16px;
  gap: 10px;
}

.price {
  color: #f56c6c;
  font-weight: bold;
}

.quick-add-buttons {
  display: flex;
  justify-content: center;
}

.added-list {
  flex: 1;
  padding: 20px;
  display: flex;
  flex-direction: column;
  background-color: #f8f9fa;
  overflow: hidden;
}

.added-header h3 {
  margin: 0 0 15px 0;
  color: #303133;
  font-size: 16px;
}

.added-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.added-items {
  flex: 1;
  overflow-y: auto;
  padding-right: 4px;
}

.added-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px;
  margin-bottom: 8px;
  background: white;
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  transition: all 0.3s ease;
}

.added-item:hover {
  transform: translateX(2px);
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

.item-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.item-name {
  font-size: 14px;
  font-weight: 500;
  color: #303133;
}

.item-details {
  display: flex;
  gap: 12px;
  font-size: 12px;
  color: #909399;
}

.item-quantity {
  color: #409EFF;
  font-weight: 500;
}

.item-price {
  font-size: 14px;
  font-weight: 500;
  color: #f56c6c;
}

.added-total {
  margin-top: 15px;
  padding: 15px;
  background: white;
  border-radius: 6px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 15px;
  font-weight: 500;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.total-price {
  color: #f56c6c;
  font-size: 16px;
  font-weight: 600;
}

.no-items {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  padding: 30px;
  background: white;
  border-radius: 6px;
  color: #909399;
  font-size: 14px;
}

.added-items::-webkit-scrollbar {
  width: 6px;
}

.added-items::-webkit-scrollbar-thumb {
  background-color: #dcdfe6;
  border-radius: 3px;
}

.added-items::-webkit-scrollbar-track {
  background-color: transparent;
}

.checkout-dialog :deep(.el-dialog__body) {
  padding: 0;
}

.checkout-card {
  border: none;
}

.checkout-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.checkout-header h3 {
  margin: 0;
  color: #303133;
  font-size: 18px;
}

.checkout-details {
  padding: 20px;
}

.time-info {
  background-color: #f8f9fa;
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 20px;
  display: flex;
  gap: 20px;
}

.time-item {
  display: flex;
  align-items: center;
  gap: 15px;
  flex: 1;
}

.time-item .el-icon {
  font-size: 24px;
  color: #409EFF;
}

.time-item.overtime .el-icon {
  color: #f56c6c;
}

.time-item.overtime .value {
  color: #f56c6c !important;
}

.fee-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  font-size: 15px;
}

.fee-item .amount.warning {
  color: #f56c6c;
  font-weight: 500;
}

.snack-details {
  margin: 20px 0;
}

.snack-details h4 {
  margin: 0 0 15px 0;
  color: #303133;
  font-size: 16px;
}

.snack-items {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.snack-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 10px;
  background-color: #f8f9fa;
  border-radius: 4px;
}

.snack-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.snack-name-qty {
  display: flex;
  align-items: center;
  gap: 8px;
}

.snack-name-qty .name {
  color: #303133;
  font-weight: 500;
}

.snack-name-qty .quantity {
  color: #909399;
  font-size: 13px;
}

.snack-info .time {
  color: #909399;
  font-size: 12px;
}

.snack-item .subtotal {
  color: #f56c6c;
  font-weight: 500;
}

.fee-details {
  padding: 0 10px;
}

.fee-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  font-size: 15px;
}

.fee-item .label {
  color: #606266;
}

.fee-item .amount {
  color: #303133;
  font-weight: 500;
}

.fee-item.total {
  font-size: 18px;
}

.fee-item.total .label {
  color: #303133;
  font-weight: bold;
}

.fee-item.total .amount {
  color: #f56c6c;
  font-weight: bold;
}

.divider {
  height: 1px;
  background-color: #dcdfe6;
  margin: 15px 0;
}

.dialog-footer {
  padding: 20px;
  text-align: right;  /* 改为右对齐 */
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.original-fees {
  background: #f8f9fa;
  padding: 15px;
  border-radius: 4px;
}

.original-fees h4 {
  margin: 0 0 10px 0;
  color: #606266;
  font-size: 14px;
}

.original-total {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed #dcdfe6;
}

.adjust-fees {
  padding: 5px 0;
}

.adjustment-section,
.remark-section {
  background: #f8f9fa;
  padding: 5px;
  border-radius: 4px;
  margin-bottom: 20px;
}

.section-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 5px;
}

.section-label {
  min-width: 70px;
  color: #606266;
  font-size: 14px;
}

.quick-adjustments {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 5px;  /* 与输入框对齐 */
}

.quick-adjustments .el-button {
  min-width: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 5px;
  border: 1px solid #dcdfe6;
  transition: all 0.3s;
}

.quick-adjustments .el-button.active {
  background: #ecf5ff;
  border-color: #409eff;
  color: #409eff;
  padding: 5px;
}

.remark-input {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.quick-remarks {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 5px;  /* 与文本框对齐 */
}

.quick-remarks .el-button {
  border-radius: 15px;
  padding: 5px 5px;
  transition: all 0.3s;
}

.quick-remarks .el-button.active {
  color: #409EFF;
  background: #ecf5ff;
  border-color: #409eff;
}

.final-fees {
  background: #fff7e6;
  padding: 5px;
  border-radius: 4px;
  margin-top: 5px;
}

.final-fees .fee-item.total {
  font-size: 18px;
}

.final-fees .fee-item.total .amount {
  color: #e6a23c;
  font-weight: bold;
}

.filter-bar {
  display: flex;
  gap: 10px;
  margin-bottom: 15px;
}

.search-input {
  flex: 2;
}

.category-filter {
  flex: 1;
}

/* 可以根据需要调整表格的样式 */
.product-list :deep(.el-table) {
  margin-top: 10px;
}

.item-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.item-actions .el-button-group {
  opacity: 0;
  transition: opacity 0.3s;
}

.added-item:hover .item-actions .el-button-group {
  opacity: 1;
}

.item-actions .el-button {
  padding: 6px;
}

.item-price {
  font-size: 14px;
  font-weight: 500;
  color: #f56c6c;
}

/* 打印按钮样式 */
.dialog-footer .el-button--success {
  display: flex;
  align-items: center;
  gap: 5px;
}

.dialog-footer .el-button--success .el-icon {
  font-size: 16px;
}
</style> 
